iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
自我挑戰組

ProtoPie 摸一摸系列 第 13

連續 30 天 玩玩看 ProtoPie - Day 13

  • 分享至 

  • xImage
  •  

今天延續昨天的文字輸入,我們來做更多嘗試。

https://ithelp.ithome.com.tw/upload/images/20210928/2014194176nWGJWZVU.png

講者把昨天 Text > Input 做出來的 Input 複製三個。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941C3Bz160Ujg.png

Shift + Option 直接往下複製出兩個就行。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941PjwV7Je3VQ.png

我們幫幾個都設定好提示文字 Placeholder 。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941iUz8Tq9JYU.png

使用 Return Trigger 和 Focus Response

以這個例子來說,要接連輸入姓名、密碼兩次。

要怎麼樣讓使用者可以輸入完一行之後,可以不用離開手機鍵盤,直接到下一個輸入區呢?

這時候就要用 Return 這個 Trigger。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941mOsDqiYmPQ.png

我們先幫 Input 1 選擇 Return 這個 Trigger ,接著選擇 Focus 作為 Response 。

Focus 有 Focus In 和 Focus Out 兩種。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941U8kxNunPdN.png

但這個講者跟之前的講者不太一樣,之前那位通常會換句話說,或是用不同的文字,或是立刻找一個例子。

這個講者剛剛用手比了一下,Focus In 就是 In (手往內抓一下)。
至於 Focus Out 他就說...我們等等再看個例子。

好吧,我們繼續看下去,他應該會解釋 lolll

總之 Input 1 的名字輸入後,我們要 Focus In 下一個密碼輸入的 Input 2 。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941PQLKZE0Zpw.png

其實講者有把旁邊的 Input 1跟 Input 2 好好的改好名字,這是比較正確的做法,尤其跟別人協作的時候。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941Ul3E8qlt3C.png

但今天有點趕可能沒時間回去重新截圖...

Preview 測試之前,我們也來改一下一些設定。

第一個名字輸入我們 Type 用 Text 作為輸入鍵盤。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941rPAGCJqwmk.png

然後我們既然希望他們可以輸入完畢跳到下一個,我們選擇鍵盤的 Return 為 Next 。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941BxakiIMiuy.png

這樣使用者輸入完名字,按下 Next ,很合理的可以輸入下一個欄位。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941oc00wu9Uk1.png

手機鍵盤右下角是 Next 而且按下去之後就會自動跳到下一格。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941ikGXbM8dwd.png

下一個講者終於解釋 Focus In 跟 Focus Out 的差別。

原來 Focus 可以當作 Trigger 也可以當作 Response 。
(Trigger 和 Response 兩個都點看看都會找到。)

雖然舉了一個例子,還是覺得有點模糊,我直接跑去看 Documentation 。

https://www.protopie.io/learn/docs/interactions/triggers#focus

“A focus in entails that the blinking cursor appears and for smart devices the native keyboard becomes visible. A focus out would be the opposite of a focus in.”

所以就是 Focus In 當作 Trigger 的時候,會造成游標出現然後鍵盤會上升,Focus Out 就會造成相反的結果,因此就是點擊之後會跳出。

明天來看看講者到底怎麼解釋 Focus In 和 Focus Out 吧!


上一篇
連續 30 天 玩玩看 ProtoPie - Day 12
下一篇
連續 30 天 玩玩看 ProtoPie - Day 14
系列文
ProtoPie 摸一摸30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言